import { Button, Input, Space } from 'antd';
import { FormItem, YmForm } from 'ym-design';

const { useForm } = YmForm;

function FormPageShouldUpdate() {
  const [form] = useForm();
  return (
    <div style={{ maxWidth: '600px' }}>
      <YmForm
        form={form}
        onFieldsChange={(changedfields, fieldDataList) => {
          console.log(
            '--Form--onFieldsChange--changedfields--fieldDataList--:',
            changedfields,
            fieldDataList,
          );
        }}
        onValuesChange={(changedValues, allValues) => {
          console.log(
            '--Form--onValuesChange--changedValues--allValues--:',
            changedValues,
            allValues,
          );
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish---values:', values);
        }}
      >
        {/* <FormItem dependencies={['name']}>
          {(control, meta, form) => {
            return form.getFieldValue('name') === '1' ? (
              <FormItem name="password">
                <Input placeholder="Password" />
              </FormItem>
            ) : null;
          }}
        </FormItem> */}

        <FormItem
          shouldUpdate={(prevValues, currValus) => {
            console.log(
              '--shouldUpdate--prevValues--currValus--',
              prevValues,
              currValus,
            );
            return prevValues.name !== currValus.name;
          }}
        >
          {(form) => {
            console.log('password-render');
            return (
              <FormItem name="password" label="password">
                <Input placeholder="Password" />
              </FormItem>
            );
          }}
        </FormItem>
        {/* initialValue="zyj1" */}
        <FormItem name="name" label="name">
          <Input type="text" placeholder="name" />
        </FormItem>
        <FormItem>
          <Space direction="horizontal">
            <Button htmlType="submit" type="primary">
              submit
            </Button>
          </Space>
        </FormItem>
      </YmForm>
      <div style={{ marginTop: '30px' }}>
        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              console.log(
                '--getFieldValue(name)--:',
                form.getFieldValue('name'),
              );
            }}
          >
            getFieldValue('name')
          </button>
          <button
            onClick={() => {
              console.log('--getFieldsValue()--:', form.getFieldsValue());
            }}
          >
            getFieldsValue()
          </button>
          <button
            onClick={() => {
              console.log(
                '--getFieldsValue(true)--:',
                form.getFieldsValue('all'),
              );
            }}
          >
            getFieldsValue(all)
          </button>
        </p>

        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              form.setFieldsValue({ name: '123', password: '456', test: 1 });
            }}
          >{`setFieldsValue({ name: '123', password: '456', test: 1 })`}</button>

          <button
            onClick={() => {
              form.setFieldValue('name', '123');
            }}
          >{`setFieldValue('name', '123')`}</button>

          <button
            onClick={() => {
              form.setFields([
                { name: 'name', value: '123' },
                { name: 'password', value: '456' },
              ]);
            }}
          >
            {' '}
            {`setFields([{ name: "name", value: '123' }, { name: 'password', value: '456' }])`}
          </button>
        </p>

        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              form.resetFields(['name']);
            }}
          >
            resetFields(['name'])
          </button>
          <button
            onClick={() => {
              form.resetFields();
            }}
          >
            resetFields()
          </button>
        </p>
      </div>
    </div>
  );
}

export default FormPageShouldUpdate;
